什麼是 StatefulWidget？

• 他是一個具備 State（狀態）的元件，裡面所有可變狀態的子元件的狀態都會保留在 Staatefulwidget 所創立的 State 裡面。
• 目的：可以用來更新畫面，當你的畫面需要變動的話，你可能就須使用 stateFulWidget。
• 影片簡介 => https://youtu.be/AqCMFXEmf3w
• 官網 => https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

StateFulWidget 的生命週期

1. createState()

• 當你創建一個 statefulWidget 的時候，會看到一個 createState()，這邊他就是開始建立狀態。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

2. mounted is true

• 底層的 flutter 會將 mounted 設定為 true，這代表他已經將 state 分配給你的子元件了。
• 你可以在 mounted == true 的情況下使用 setState() 來更新畫面。因為這個參數是用來確保 State 存在 setState()，也就是說，在 mounted == true 的情況才可以使用 setState()

3. initState()

• 只會調用一次，初始化，並要求要有 super.initState()。
• 這邊可以用來初始化一些參數、controlle 的 listener、stream.listen() 等等..

  @override
 void initState() {
   super.initState();
   // TODO
 }

4. didChangeDependencies()

• 子元件依賴於更新的 InheritedWidget 會被調用。
• 注意：initState 的 function 不一定會在全部執行完成才會觸發這個方法，有的時候 didChangeDependencies 被觸發時， initState() 裡面的方法還未全部執行完成。

5. build()

• 畫面 UI
• 必須回傳一個 Widget

6.didUpdateWidget(Widget oldWidget)

• 只要在父元件中调用 setState()，子元件的的 didUpdateWidget() 就一定會被觸發，不管父元件傳遞給子元件的建構子參數有沒有變化。

7. setState()

• 它用於通知 Framework 數據已更改，此時 build() 裡面的 context 會重新建構元件 。
• 便宜，不吃效能。因為他裡面不能使用 async 的方法。

8. deactivate()

• 當頁面切換時，會觸發，此時 State 在視圖樹中的位置發生了變化，需要先暫時移除後添加。

9. destory()

• 將資源釋放。而在呼叫這個方法之前，會先呼叫 deactivate()。

10. mounted is false

• 底層的 flutter 會將 mounted 設定為 false，這代表他已經將 state 從子元件裡面移開了。
• 在 mounted == false 的情況下使用 setState() 會噴 ERROR。

什麼是 StatelessWidget？

• 無狀態的元件，通常是純畫面。
• 影片簡介 => https://youtu.be/wE7khGHVkYY
• 官網介紹 => https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html

Flutter 的 Widget 寫法有兩種

第一種 - 使用 function 當作 Widget

Widget myWidget(){
    return Text('title');
} 

第二種 - 使用 class 當作 Widget

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('title');
  }
}

差異

由此圖可知，如果寫成 class 可以透過 flutter inspector 看到自己的 class 名稱(MyWidget)，如果是使用 function 的方式的話，只會看到Text。

怎麼選擇？

就看你的習慣是什麼了～只要好閱讀，都是好方法。